<!--suppress ALL -->
<template>
  <transition name="slide">
    <div class="active-signup">
      <page-header title="活动报名"></page-header>
      <scroll class="signup-content" ref="signupScroll">
        <div >
          <div class="signup-info" >
            <div class="pic"><img :src="data.picture"></div>
            <div class="text">
              <p>{{data.name}}</p>
              <p class="price">{{data.money}}</p>
            </div>
          </div>
          <ul class="signup-detail">
            <li>
              <span>活动时间</span>
              <p>{{data.startTime}}</p>
            </li>
            <li>
              <span>活动地点</span>
              <p>{{data.acplace}}</p>
            </li>
            <li @click="_turn()">
              <span>优惠券</span>
              <p style="color:red;">{{discount}}&nbsp;&nbsp;  > </p>
            </li>
          </ul>
          <div class="agreement" >
            <i :class="{'active': agreement}" @click="agreement = !agreement"></i>
            <p>我已阅读并同意</p>
            <span @click="_turnAgreement">《服务协议》</span></div>
        </div>
      </scroll>
      <ul class="buy">
        <div class="price">实付金额：<span>¥{{realAmt}}</span></div>
        <div class="submit"  :class="{'noAgree': !agreement}"  @click="_submit">立即报名</div>
      </ul>
    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
import PageHeader from 'components/page-header'
import Scroll from 'components/scroll/scroll'
import * as exampleApi from 'api/example'

export default {

  components: {
    PageHeader,
    Scroll
  },
  data () {
    return {
      type: '',
      activityId: '',
      id: '',
      money: '',
      numb: 1,
      discount: '',
      couponId: '',
      name: '',
      msg: '',
      sj: '',
      payid: '',
      agreement: false,
      data: {},
      list: {},
      arrlist: {},
      datalist: {},
      realAmt: 0
    }
  },
  created() {
    this.type = this.$route.name
    this.id = this.$route.params.id
    this.name = this.$route.params
    this.discount = window.sessionStorage.getItem('discount')
    this.couponId = window.sessionStorage.getItem('couponId')
    this._initData()
  },
  mounted() {

  },
  methods: {
    _initData() {
      exampleApi.modePost('/api/public/wz/activity/details', {
        wzActivityId: this.id
      }).then(
        res => {
          this.data = res.data.data.bean
          let realAmt = this.data.money * this.numb - this.discount
          this.realAmt = realAmt < 0 ? 0 : realAmt
        }
      )
    },
    _minus() {
      if (this.numb <= 1) {
        return
      }
      this.numb --
    },
    _plus() {
      this.numb ++
    },
    _submit() {
      let money = this.realAmt
      let studentId = sessionStorage.getItem('studentId')
      let orgId = sessionStorage.getItem('siteId')
      if (studentId === '-1') {
        alert('您尚未登录，请先登录')
        this.$router.push({path: '/login'})
        return
      }
      exampleApi.modePost('/api/public/wz/activity/signup', {
        memberId: studentId,
        activityId: this.id,
        money: money,
        orgId: orgId,
        numb: this.numb,
        discount: this.discount ? this.discount : 0,
        couponId: this.couponId ? this.couponId : ''
      }).then(response => {
        if (response.data.code === '0') {
          if (money <= 0) {
            alert('报名成功！')
            this.$router.push({path: '/home'})
          } else {
            let sj = response.data.data.sj
            let id = response.data.data.id
            alert('报名成功，请在10分钟内进行缴费，点击“确定”立即缴费或稍后在“我的报名”逐一缴费！预约号：' + sj)
            this.$router.push({
              path: `/activity/pay` + id
            })
          }
        } else {
          alert('报名失败，' + response.data.msg)
        }
      }).catch(function (error) {
        console.log(error)
      })
    },
    _turn() {
      this.$router.push({
        path: `/personal/redenvelope` + this.$route.params.id
      })
    },
    _turnAgreement() {
      this.$router.push({
        path: `/activity/agreement`
      })
    }
  }
}
</script>

<style lang="less" scoped>
.slide-enter-active,.slider-leave-active {
  transition: all 0.3s
}
.slide-enter,.slide-leave-to {
  transform: translate3d(100%, 0, 0)
}
.enter{
  text-align:center;
}
.active-signup {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right:0;
  background-color: #e6e6e6;
  z-index: 992;
  .signup-content{
    height:calc(~"100% - 164px");
    overflow: hidden;
    .signup-info{
      width:100%;
      height: 205px;
      background-color: #ffffff;
      display:flex;
      box-sizing:border-box;
      padding: 28px 20px;
      .pic{
        flex: 0 0 220px;
        width: 220px;
        height: 100%;
        overflow:hidden;
        box-shadow: 0px -3px 7px 0px rgba(0, 0, 0, 0.2);
        border-radius: 8px;
        img{
          width: 100%;
          height: auto;
        }
      }
      .text{
        padding-left: 25px;
        display:flex;
        flex-direction:column;
        justify-content: space-around;
        p{
          font-size: 30px;
          color: #333333;
        }
        .price{
          font-size: 34px;
          color: #ee4941;
          &::before {
            display: inline-block;
            vertical-align: text-top;
            content: '';
            width: 36px;
            height: 36px;
            margin-right: 10px;
            background: url('../../assets/image/icon_price.png') no-repeat center / 36px;
          }
        }
      }
    }
    .signup-detail{
      margin-top: 20px;
      width: 100%;
      padding:0 20px;
      box-sizing: border-box;
      background-color: #fff;
      li{
        height:80px;
        box-sizing: border-box;
        border-bottom: 1px solid #cccccc;
        display:flex;
        justify-content:space-between;
        align-items: center;
        &:nth-last-child(1) {
          border:none;
        }
        &:nth-child(2) {
          span::before{
            background-image: url('../../assets/image/icon_sign_2.png')
          }
        }
        &:nth-child(3) {
          span::before{
            background-image: url('../../assets/image/icon_sign_3.png')
          }
        }
        &:nth-child(4) {
          span::before {
            background-image: url('../../assets/image/icon_sign_3.png')
          }
        }
        span{
          font-size: 28px;
          color: #333333;
          &::before{
            display: inline-block;
            margin-right: 14px;
            vertical-align: text-bottom;
            content: '';
            width: 34px;
            height: 26px;
            background: url('../../assets/image/icon_sign_1.png') no-repeat center center / auto 26px;
          }
        }
        p{
          font-size: 26px;
          color: #999999;
        }
        .counter{
          display:flex;
          div{
            width: 50px;
            height: 50px;
            border: 1px solid #cccccc;
            font-size: 26px;
            line-height: 50px;
            text-align: center;
            color: #999999;
          }
          div:nth-child(2) {
            width: 84px;
            border-left: none;
            border-right: none;
            color: #19ce29;
          }
        }
      }
    }
    .agreement{
      margin-top: 20px;
      height: 80px;
      background-color: #ffffff;
      display:flex;
      align-items: center;
      box-sizing: border-box;
      padding-left: 25px;
      p{
        font-size: 22px;
        color: #999999;
      }
      i{
        width: 24px;
        height: 24px;
        border-radius: 4px;
        box-sizing:border-box;
        border: solid 1px #cccccc;
        margin-right: 14px;
        &.active {
          background-color: #4788f4;
          border-color: #4788f4;
        }
      }
      span{
        font-size: 22px;
        color: #4788f4;
      }
    }
  }
  .buy{
    width: 100%;
    height: 80px;
    background-color: #fff;
    display: flex;
    .submit{
      width: 342px;
      flex: 0 0 342px;
      background-color: #ee4941;
      font-size: 28px;
      line-height: 80px;
      color: #ffffff;
      text-align: center;
    }
    .submit.noAgree{
      background-color: #ddd;
    }
    .price{
      flex: 1;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding-left: 20px;
      font-size: 24px;
      color: #666666;
      span{
        font-size: 30px;
        color: #ee4941;
      }
    }
  }
}
</style>
